<template>
  <el-card style="padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px;">
      添加课程
    </el-button>
    <el-table :data="courses" style="width: 100%;" border stripe>
      <el-table-column label="编号" prop="id" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="学分" prop="credit" />
      <el-table-column label="学时" prop="hours" />
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑课程对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="form.credit" type="number" />
        </el-form-item>
        <el-form-item label="学时">
          <el-input v-model="form.hours" type="number" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
  name: "CourseView",
  data() {
    return {
      courses: [
        { id: 1, name: '高等数学', credit: 4, hours: 64 },
        { id: 2, name: '大学英语', credit: 3, hours: 48 },
        { id: 3, name: '计算机基础', credit: 2, hours: 32 },
        { id: 4, name: '数据结构', credit: 3, hours: 48 },
        { id: 5, name: '操作系统', credit: 4, hours: 64 },
      ],           // 课程列表（静态数据）
      dialogVisible: false,  // 对话框显示状态
      dialogTitle: '',       // 对话框标题
      form: {                // 表单数据
        id: null,
        name: '',
        credit: 0,
        hours: 0
      }
    };
  },
  methods: {
    // 加载课程数据
    loadCourses() {
      // 这里可以保留从后端加载数据的逻辑
      // this.$axios.get('/courses')
      //     .then(response => {
      //       if (response.data.code === 200) {
      //         this.courses = response.data.data;
      //       }
      //     })
      //     .catch(error => {
      //       ElMessage.error('加载课程数据失败');
      //     });
    },
    // 打开添加课程对话框
    handleAdd() {
      this.dialogTitle = '添加课程';
      this.form = { id: null, name: '', credit: 0, hours: 0 };
      this.dialogVisible = true;
    },
    // 打开编辑课程对话框
    handleEdit(row) {
      this.dialogTitle = '编辑课程';
      this.form = { ...row };
      this.dialogVisible = true;
    },
    // 提交表单（添加或编辑）
    handleSubmit() {
      if (this.form.id) {
        // 编辑课程
        const index = this.courses.findIndex(course => course.id === this.form.id);
        if (index !== -1) {
          this.courses.splice(index, 1, { ...this.form });
        }
      } else {
        // 添加课程
        const newCourse = { ...this.form, id: this.courses.length + 1 };
        this.courses.push(newCourse);
      }
      this.dialogVisible = false;
      ElMessage.success('操作成功');
    },
    // 删除课程
    handleDelete(id) {
      this.courses = this.courses.filter(course => course.id !== id);
      ElMessage.success('删除成功');
    }
  },
  mounted() {
    // 这里可以保留从后端加载数据的逻辑
    // this.loadCourses();
  }
};
</script>

<style scoped>
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f5f7fa;
}

.el-table__row:hover {
  background-color: #e6f7ff !important;
}
</style>